<template>
	<view class="container-portrait flex-between">
		<view class="lt flex" @click="$fun.jump(`/pageA/userInfo`)">
			<view class="portrait">
				<image src="@/static/portrait-bgc.png" mode=""></image>
				<view class="portrait-box">
				<image :src="userInfo.avatar" mode="" style="overflow: hidden;border-radius: 50%;"></image>
				</view>
			</view>
			<view class="nickname-box" style="font-size: 28rpx;">
				<view class="">
					{{$t('home.name9')}}：{{userInfo.nickname}}
				</view>
				<view class="" style="font-weight: 400;" @click="copy(userInfo.username)">
					{{$t('user.name65')}}：{{userInfo.mobile}}
				</view>
				<view class="member">
					{{userInfo.levelname}}
				</view>
			</view>
		</view>
		
		<!-- <view class="rt" v-if="right == 1">
			<view class="person">
				<view class="person-img">
					<image src="@/static/public/person.png" mode=""></image>
					<view class="text">
						{{ userInfo.userflow ? userInfo.userflow: 0}}
					</view>
				</view>
				<view class="text">
					{{$t('home.name11')}}
				</view>
			</view>
			<view class="network">
				<view class="network-img">
					<image src="@/static/public/network.png" mode=""></image>
					<view class="text">
						{{userInfo.dayflow ? userInfo.dayflow: 0 }}
					</view>
				</view>
				<view class="text">
					{{$t('home.name12')}}
				</view>
			</view>
		</view>
		<view class="rt" v-if="right == 'set'">
			<view class="" style="margin: 0 20rpx;" @tap="$fun.jump('/pageA/set')">
				<u-icon name="setting" color="#fff" size="26"></u-icon>
			</view>
		</view> -->
		<view class="rt flex-between">
			<view class="network">
				<view class="network-img" @click="showlang=!showlang">
					<image src="/static/slLang.png" mode=""></image>
				</view>
				<view class="" v-if="showlang==true" @click="showlang=false">
					<view class="lang" style="width: 180rpx;color: #fff;text-align: center;" :style="right == 1?'':'left:-100rpx;'">
						<!-- <view class="title">{{$t('lang.togger')}}</view> -->
						<view class="itemlang" :class="['item',_i18n.locale == 'zh'?'active':'']" @click="setLang('zh',$t('lang.zh'))">{{$t('lang.zh')}}</view>
						<view class="itemlang" :class="['item',_i18n.locale == 'tw'?'active':'']" @click="setLang('tw',$t('lang.tw'))">{{$t('lang.tw')}}</view>
						<view class="itemlang" :class="['item',_i18n.locale == 'en'?'active':'']" @click="setLang('en',$t('lang.en'))">{{$t('lang.en')}}</view>
						<view class="itemlang" :class="['item',_i18n.locale == 'jp'?'active':'']" @click="setLang('jp',$t('lang.jp'))">{{$t('lang.jp')}}</view>
						<view class="itemlang" :class="['item',_i18n.locale == 'ko'?'active':'']" @click="setLang('ko',$t('lang.ko'))">{{$t('lang.ko')}}</view>
					</view>
				</view>
			</view>
			<view class="" @tap="$fun.jump(`/pageB/news/news?type=0&name=${$t('user.name74')}`)" v-if="right == 1">
				<image src="../../static/index/news.png" style="width: 80rpx;height: 80rpx;" mode=""></image>
				<view class="" style="font-size: 22rpx;color: #fff;text-align: center;margin-top: -10rpx;">{{$t('user.name74')}}</view>
			</view>
		</view>
		<!-- <view class="rt" v-if="right == 'set'">
			<view class="" style="margin: 0 20rpx;" @tap="$fun.jump('/pageA/set')">
				<u-icon name="setting" color="#fff" size="26"></u-icon>
			</view>
		</view> -->
	</view>
</template>

<script>
	import uniCopy from '@/components/xb-copy/uni-copy.js'
	export default {
		name:"c-portrait",
		props:{
			right:{
				default:'1'
			}
		},
		data() {
			return {
				userInfo:{},
				statusBarHeight:0,
				showlang:false
			};
		},
		async created() {
			await this.getuser()
		},
		 onLoad() {
			const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
			this.statusBarHeight = phoneInfo.statusBarHeight
		},
		methods:{
			getuser(){
				this.$fun.ajax.post('user/index', {}).then(res => {
					if (res.code == 1) {
						this.userInfo = res.data
					}
				})
			},
			setLang(val,lang) {
				if (this._i18n.locale == val) return
				// 切换为英文
				this._i18n.locale = val
				this.lang=lang
				let locaval=''
				if(val=='zh'){
					locaval='zh-Hans'
				}else if(val=='tw'){
					locaval='zh-Hant'
				}else{
					locaval='en'
				}
				uni.setLocale(locaval)
				uni.setStorageSync('language', val)
				uni.setStorageSync('lang', lang)
				// const  message = this._i18n.locale === 'en' ? enLocale : zhLocale
				// this._i18n.setLocaleMessage(val,message)   //无感刷新
				this.show = false
				this.$fun.msg(this.$t('user.name22'))
				this.showlang=false
				this.getuser()
				this.$emit('changeLang',val)
			},
			copy(text) {
				uniCopy({
					content: text,
					success: (res) => {
						uni.showToast({
							title: res,
							icon: 'none'
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 3000,
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
	}
.container-portrait{
	width: 100%;
	padding: 20rpx 0;
	.lt{
		.portrait{
			position: relative;
			width: 120rpx;
			height: 120rpx;
			// background-color: #fff;
			border-radius: 50%;
			.portrait-box{
				width: 88rpx;
				height: 88rpx;
				position: absolute;
				left: 50%;
				transform: translate(-50%,-50%);
				top: 50%;	
			}
		}
		.nickname-box{
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			// text-align: center;
			min-width: 168rpx;
			height:78rpx;
			background: linear-gradient( to left, rgba(255, 255, 255, 0) 20%, rgba(0, 163, 255,.6) 60%, rgba(255, 255, 255, 0) 100%);
			.member{
				margin: 5rpx 0;
				padding: 0 10rpx;
				// width: 108rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				// font-size: 20rpx;
				color: #232323;
				// line-height: 19rpx;
				background-color: #d4dae2;
				border-radius: 20rpx;
				text-align: center;
			}
		}
	}
	.rt{
		.text{
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 21rpx;
			text-align: center;
			margin-top: -10rpx;
		}
		.person{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			.person-img{
				width: 142rpx;
				height: 66rpx;
				position: relative;
				.text{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 10rpx;
					margin: 0;
				}
			}
		}
		.network{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			position: relative;
			.lang{
				position: absolute;
				left: -64rpx;
				top: 100%;
				width: 100%;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
				// line-height: 40rpx;
				text-align: center;
				background-color: #606266;
				// padding: 0 30rpx;
				border-radius: 20rpx;
				z-index: 10;
				.itemlang{
					line-height: 80rpx;
					border-bottom: 1rpx solid #d4dae2;
					
				}
				.itemlang:last-child{
					border-bottom: none;
				}
			}
			.network-img{
				width: 56rpx;
				height: 56rpx;
				margin-right: 10rpx;
				position: relative;
				.text{
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: 10rpx;
					margin: 0;
				}
			}
		}
	}
}
</style>